<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite环境Orders组件导入测试</title>
    <script type="module" src="/@vite/client"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
            margin-top: 0;
        }
        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            font-weight: bold;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .loading {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        pre {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
            border: 1px solid #dee2e6;
            margin-top: 10px;
        }
        .debug-info {
            margin-top: 20px;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .step {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border-left: 4px solid #007bff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Vite环境Orders组件导入测试</h1>
        
        <div class="step">
            <h3>测试目的</h3>
            <p>这个页面用于直接在Vite环境中测试Orders组件的导入功能，帮助诊断动态导入失败的具体原因。</p>
        </div>
        
        <div class="step">
            <h3>测试状态</h3>
            <div id="status" class="status loading">
                正在尝试导入Orders组件...请稍候
            </div>
        </div>
        
        <div id="debugOutput" class="debug-info" style="display: none;">
            <h3>调试输出</h3>
            <pre id="debugContent"></pre>
        </div>
        
        <div id="errorStack" class="debug-info" style="display: none;">
            <h3>错误堆栈</h3>
            <pre id="stackContent"></pre>
        </div>
        
        <button id="retryBtn" style="display: none;" onclick="window.location.reload()">
            重试导入
        </button>
    </div>

    <script type="module">
        // 获取DOM元素
        const statusElement = document.getElementById('status');
        const debugOutputElement = document.getElementById('debugOutput');
        const debugContentElement = document.getElementById('debugContent');
        const errorStackElement = document.getElementById('errorStack');
        const stackContentElement = document.getElementById('stackContent');
        const retryBtn = document.getElementById('retryBtn');
        
        // 记录调试信息到页面
        function logDebugInfo(message) {
            debugOutputElement.style.display = 'block';
            debugContentElement.textContent += `[${new Date().toLocaleTimeString()}] ${message}\n`;
            console.log(message);
        }
        
        // 记录错误信息
        function logError(error) {
            errorStackElement.style.display = 'block';
            stackContentElement.textContent = error.stack || JSON.stringify(error, null, 2);
            console.error(error);
        }
        
        // 尝试动态导入Orders组件
        async function testOrdersImport() {
            try {
                // 显示加载状态
                statusElement.className = 'status loading';
                statusElement.textContent = '正在尝试导入Orders组件...请稍候';
                
                // 记录开始信息
                logDebugInfo('开始尝试动态导入Orders组件...');
                logDebugInfo(`当前时间: ${new Date().toLocaleString()}`);
                
                // 尝试直接导入Orders组件
                const startTime = performance.now();
                
                // 方法1: 直接动态导入
                logDebugInfo('方法1: 使用直接动态导入...');
                const module = await import('/src/views/Orders.vue');
                
                const endTime = performance.now();
                logDebugInfo(`导入完成! 用时: ${(endTime - startTime).toFixed(2)}ms`);
                logDebugInfo(`导入的模块:`, module);
                
                // 检查模块内容
                if (module.default) {
                    logDebugInfo(`发现默认导出: ${typeof module.default}`);
                }
                
                // 显示成功消息
                statusElement.className = 'status success';
                statusElement.textContent = '✓ Orders组件导入成功!';
                
                // 尝试方法2: 使用import.meta.glob
                try {
                    logDebugInfo('\n方法2: 使用import.meta.glob测试...');
                    const modules = import.meta.glob('/src/views/Orders.vue');
                    logDebugInfo(`import.meta.glob结果:`, modules);
                } catch (globError) {
                    logDebugInfo(`import.meta.glob测试出错:`, globError.message);
                }
                
            } catch (error) {
                // 显示错误消息
                statusElement.className = 'status error';
                statusElement.textContent = `✗ Orders组件导入失败: ${error.name}`;
                
                // 记录错误详细信息
                logDebugInfo(`导入失败: ${error.message}`);
                logError(error);
                
                // 显示重试按钮
                retryBtn.style.display = 'block';
            }
        }
        
        // 运行测试
        testOrdersImport();
    </script>
</body>
</html>